<script setup lang="ts">
import {
  ElRow,
  ElCol,
  ElInput,
  ElButton,
  ElMessage,
  ElTable,
  ElTableColumn,
  ElLoading,
} from "element-plus";
import { ref, onMounted, onUnmounted, watch } from "vue";
import { DocumentEditor } from "@onlyoffice/document-editor-vue";
import PrintDocComponent from "./PrintDocComponent.vue";

defineOptions({
  name: "PrintDocDemo",
});

const getUuid = function () {
  return "xxxxxxxxxxxxxxxxxxxxxx".replace(/[xy]/g, function (c) {
    var r = (Math.random() * 16) | 0,
      v = c == "x" ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
};

const VITE_ONLY_OFFICE_BASE_URL = import.meta.env.VITE_ONLY_OFFICE_BASE_URL;
onMounted(() => {});

onUnmounted(() => {});

const init = function () {};
init();

let configList = ref([
  {
    type: "desktop",
    documentType: "word",
    historyList: { history: [], currentVersion: "1" },
    document: {
      title: "文档1.docx",
      url: "http://47.94.91.67/demo_file/comment_test.docx",
      permissions: { print: true, download: true, edit: true },
      fileType: "docx",
      key: getUuid(),
      isForm: false,
    },
    editorConfig: {
      customization: {
        autosave: false,
        compactToolbar: true,
        forcesave: true,
        toolbarNoTabs: true,
        help: false,
        compactHeader: true,
        hideRightMenu: true,
        plugins: true,
        about: false,
        feedback: false,
      },
      mode: "edit",
      callbackUrl:
        "https://api.docs.onlyoffice.com/dummyCallback",
      lang: "zh-CN",
      user: { name: "曹瑞剑雄", id: "104" },
    },
    token:
      "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0eXBlIjoiZGVza3RvcCIsImRvY3VtZW50VHlwZSI6IndvcmQiLCJoaXN0b3J5TGlzdCI6eyJoaXN0b3J5IjpbXSwiY3VycmVudFZlcnNpb24iOiIxIn0sImRvY3VtZW50Ijp7InRpdGxlIjoi5omT5Y2wLmRvY3giLCJ1cmwiOiJodHRwOi8vNDcuOTQuOTEuNjcvZGVtb19maWxlL2NvbW1lbnRfdGVzdC5kb2N4IiwicGVybWlzc2lvbnMiOnsicHJpbnQiOnRydWUsImRvd25sb2FkIjp0cnVlLCJlZGl0Ijp0cnVlfSwiZmlsZVR5cGUiOiJkb2N4Iiwia2V5IjoiZDllNWI2ZGMwY2ZiNTQ4NGRjMjBlMiIsImlzRm9ybSI6ZmFsc2V9LCJlZGl0b3JDb25maWciOnsiY3VzdG9taXphdGlvbiI6eyJhdXRvc2F2ZSI6ZmFsc2UsImNvbXBhY3RUb29sYmFyIjp0cnVlLCJmb3JjZXNhdmUiOnRydWUsInRvb2xiYXJOb1RhYnMiOnRydWUsImhlbHAiOmZhbHNlLCJjb21wYWN0SGVhZGVyIjp0cnVlLCJoaWRlUmlnaHRNZW51Ijp0cnVlLCJwbHVnaW5zIjp0cnVlLCJhYm91dCI6ZmFsc2UsImZlZWRiYWNrIjpmYWxzZSwiZm9udCI6eyJuYW1lIjoi6ZuF6buRIiwic2l6ZSI6IjE0cHgifX0sIm1vZGUiOiJlZGl0IiwiY2FsbGJhY2tVcmwiOiJodHRwczovL3d3dy5vbmx5b2ZmaWNlLmNvbTo0NDMvY2FsbGJhY2suYXNoeD9mcm9tPW9mZmljZS1zdWl0ZSIsImxhbmciOiJ6aC1DTiIsInVzZXIiOnsibmFtZSI6IuabueeRnuWJkembhCIsImlkIjoiMTA0In19fQ.wyOGjZTV64sCQARRScxN9lLxus9g6YSL5Fnq90g50ew",
  },
  {
    type: "desktop",
    documentType: "word",
    historyList: { history: [], currentVersion: "1" },
    document: {
      title: "文档2.docx",
      url: "http://47.94.91.67/demo_file/demo.docx",
      permissions: { print: true, download: true, edit: true },
      fileType: "docx",
      key: getUuid(),
    },
    editorConfig: {
      customization: {
        autosave: false,
        // compactToolbar: true,
        forcesave: true,
        // toolbarNoTabs: true,
        // help: false,
        // compactHeader: true,
        // hideRightMenu: true,
        plugins: true,
        // about: false,
        // feedback: false,
      },
      mode: "edit",
      callbackUrl:
        "https://api.docs.onlyoffice.com/dummyCallback",
      lang: "zh-CN",
      user: { name: "曹瑞剑雄", id: "104" },
    },
  },
  {
    type: "desktop",
    documentType: "word",
    historyList: { history: [], currentVersion: "1" },
    document: {
      title: "文档3.docx",
      url: "http://47.94.91.67/demo_file/DemoRich.docx",
      permissions: { print: true, download: true, edit: true },
      fileType: "docx",
      key: getUuid(),
      isForm: false,
    },
    editorConfig: {
      customization: {
        autosave: false,
        compactToolbar: true,
        forcesave: true,
        toolbarNoTabs: true,
        help: false,
        compactHeader: true,
        hideRightMenu: true,
        plugins: true,
        about: false,
        feedback: false,
      },
      mode: "edit",
      callbackUrl:
        "https://api.docs.onlyoffice.com/dummyCallback",
      lang: "zh-CN",
      user: { name: "曹瑞剑雄", id: "104" },
    },
  },
  {
    type: "desktop",
    documentType: "word",
    historyList: { history: [], currentVersion: "1" },
    document: {
      title: "文档4.docx",
      url: "http://47.94.91.67/demo_file/paragraphMarkTarget.docx",
      permissions: { print: true, download: true, edit: true },
      fileType: "docx",
      key: getUuid(),
      isForm: false,
    },
    editorConfig: {
      customization: {
        autosave: false,
        compactToolbar: true,
        forcesave: true,
        toolbarNoTabs: true,
        help: false,
        compactHeader: true,
        hideRightMenu: true,
        plugins: true,
        about: false,
        feedback: false,
      },
      mode: "edit",
      callbackUrl:
        "https://api.docs.onlyoffice.com/dummyCallback",
      lang: "zh-CN",
      user: { name: "曹瑞剑雄", id: "104" },
    },
  },
]);

let currentConfig = ref({});
let uuid = ref(getUuid());
let loading = null;
let print = function (configData) {
  loading = ElLoading.service({
    lock: true,
    text: "正在加载文档...",
    background: "rgba(0, 0, 0, 0.7)",
  });
  uuid.value = getUuid();
  currentConfig.value = configData;
};

let printReady = function () {
  if (loading == null || loading == undefined) {
    return;
  }
  loading.close();
};
</script>

<template>
  <di class="onlyoffice_demo_container" ref="containerRef">
    <el-table :data="configList" stripe style="width: 100%">
      <el-table-column prop="document.title" label="文件" width="180" />
      <el-table-column fixed="right" label="操作" min-width="120">
        <template v-slot="scope">
          <el-button type="primary" @click="print(scope.row)"> 打印 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <PrintDocComponent
      @print-ready="printReady"
      :config="currentConfig"
      :key="uuid"
      v-if="currentConfig.document != undefined"
    />
  </di>
</template>

<style scoped>
.onlyoffice_demo_container {
  width: 100%;
  height: 100%;
  display: inline-block;
}
</style>
